<template>
  <div class="reg-step__1">
    <div class="reg-title">
      <div><span class="big">1</span>填写求职意向</div>
      <div>为了给您推荐更好的职位，请您填写下以下信息～</div>
    </div>
    <div class="wrapper-form">
      <a-form
        size="large"
        :label-col="{ span: 5 }"
        ref="formRef"
        :rules="rules"
        :model="formData"
      >
        <!-- <a-form-item label="期望工作区域">
          <a-select
            size="large"
            :fieldNames="{ label: 'name', value: 'code', options: 'options' }"
            :options="areaList"
            v-model:value="formData.desiredAreaCode"
            placeholder="请选择"
          >
          </a-select>
        </a-form-item> -->
        <a-form-item label="期望职位" name="desiredPositionCode">
          <a-tree-select
            size="large"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            v-model:value="formData.desiredPositionCode"
            placeholder="请选择"
            :tree-data="posList"
            allow-clear
            showSearch
            tree-default-expand-all
            treeNodeFilterProp="name"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="期望行业" name="desiredIndustryCode">
          <a-tree-select
            size="large"
            v-model:value="formData.desiredIndustryCode"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            :tree-data="industryList"
            allow-clear
            showSearch
            tree-default-expand-all
            treeNodeFilterProp="name"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="期望薪资" name="salary">
          <SalaryInput v-model:value="formData.salary" />
        </a-form-item>
        <a-form-item label="当前求职状态" name="currentState">
          <a-select
            size="large"
            placeholder="请选择"
            :options="CURRENT_JOB_STATE_DICT"
            v-model:value="formData.currentState"
          >
          </a-select>
        </a-form-item>
      </a-form>
      <div class="btn-box">
        <a-button type="primary" @click="onNextClick">下一步</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import CommonService from '@/api/common';
import UserService from '@/api/user';
import { message } from 'ant-design-vue';
import { step1Rules as rules } from '../util';
import { array2Tree, disabledTreeData } from '@/utils/util';
import { CURRENT_JOB_STATE_DICT } from '@/utils/dict';
import SalaryInput from './SalaryInput.vue';
import { Storage } from '@/utils/Storage';
import { useUserStore } from '@/store/user';

// 如果从上一步进入则需要从 userStore 取求职意向字段，赋值给 formData 对象
export default {
  emits: ['on-next', 'on-last'],
  components: { SalaryInput },
  data() {
    return {
      rules,
      formData: {
        currentState: null,
        desiredAreaCode: null,
        desiredPositionCode: null,
        desiredIndustryCode: null,
        salary: {
          desiredSalaryMin: 10,
          desiredSalaryMax: 15,
          salaryMonth: 12,
        },
      },
      CURRENT_JOB_STATE_DICT,
      areaList: [],
      posList: [],
      industryList: [],
      userStore: useUserStore(),
      Register_0: Storage.get('Register_0'),
    };
  },
  methods: {
    async onNextClick() {
      try {
        await this.$refs.formRef?.validate();
        const formData = {
          ...this.formData,
          ...this.formData.salary,
          desiredSalaryMin: this.formData.salary.desiredSalaryMin * 1000,
          desiredSalaryMax: this.formData.salary.desiredSalaryMax * 1000,
          salary: null,
        };
        const userServiceMethod = this.Register_0
          ? UserService.editPurpose
          : UserService.improvePurpose;

        const resp = await userServiceMethod(formData);

        if (resp.code === 200) {
          Storage.remove('Register_0');
          this.$emit('on-next', 1);
        } else {
          const errorMessage = resp?.msg || '操作失败';
          message.error(errorMessage);
        }
      } catch (error) {
        console.error(error);
      }
    },

    async selectAreaListFromRedis() {
      // try {
      //   const resp = await CommonService.selectAreaListFromRedis();
      //   if (resp.code === 200) {
      //     const arr = [{ name: '全部', code: null }, ...resp.data];
      //     this.areaList = arr;
      //   }
      // } catch (error) {
      //   console.log(error);
      // }
    },

    async selectPositionListFromRedis() {
      try {
        const resp = await CommonService.selectPositionListFromRedis();
        if (resp.code === 200) {
          this.posList = array2Tree(resp.data, '', 'code', 'parentCode');
          disabledTreeData(this.posList);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async selectIndustryListFromRedis() {
      try {
        const resp = await CommonService.selectIndustryListFromRedis();
        if (resp.code === 200) {
          this.industryList = array2Tree(resp.data, '0', 'code', 'parentCode');
          disabledTreeData(this.industryList);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async selectSeekerImprove() {
      try {
        const resp = await UserService.selectSeekerImprove();
        if (resp.code === 200) {
          const data = resp.data.seekerPurposeBo;
          this.formData = Object.assign(this.formData, data);
          this.formData.salary.desiredSalaryMin = data?.desiredSalaryMin / 1000;
          this.formData.salary.desiredSalaryMax = data?.desiredSalaryMax / 1000;
          this.formData.currentState = data?.currentState.toString();
          this.userStore.setUserInfo(data);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  mounted() {
    this.selectAreaListFromRedis();
    this.selectPositionListFromRedis();
    this.selectIndustryListFromRedis();
    if (this.Register_0) {
      //返回上一步
      this.selectSeekerImprove();
    }
  },
};
</script>

<style lang="scss" scoped>
.reg-step__1 {
  box-sizing: border-box;
  padding: 0 302px 103px 278px;
  .wrapper-form {
    box-sizing: border-box;
    padding-left: 20px;
    margin-top: 20px;
  }
  .btn-box {
    text-align: center;
    margin-top: 28px;
    :deep(.ant-btn) {
      border-color: #1890ff;
      background-color: #1890ff;
      width: 160px;
    }
  }
}
</style>
